<template>

	<view class="bg-color">
		<rf-topSearch headNavigationType="1" @fan="fan"></rf-topSearch>
		<view class="top" @click="share=true">
			<image src="../../static/WechatIMG36.jpg" mode="widthFix"></image>
		</view>
		<view class="title">
			<image src="../../static/specialofferBg.png" mode="widthFix"></image>
			<view class="">
				特价专场  低价速抢
			</view>
		</view>
		<view class="" v-if="shopData.length !=0 ">
			<view class="foot"  @click="toDetail(items.id)" :style="{'margin-left': index%3==0?'3%':'1%'}" v-for="(items,index) in shopData" :key="index">
				<view class="left">
					<image :src="items.picture" mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="cont">
						{{items.name}}
					</view>
					<view class="grab">
						疯抢价
					</view>
					<view class="price">
						￥{{items.price}}
					</view>
					<view class="tu1">
						<image src="../../static/qiang.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import topSearch from "@/components/rf-topSearch/rf-topSearch.vue"
	import { specialIndex } from "@/api/product";
	export default {
		data() {
			return {
				share:false,
				shareType:'h5',
				shareUrl:'',
				shopData:[]
			};
		},
		onLoad(option) {
			this.init();
		},
		onHide(){
		},
		onPullDownRefresh() {
		},
	
		methods:{
			fan(){
				uni.navigateBack()
			},
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/product/activeProduct?id=${id}&type=special`
				})
			},
			init(){
				this.$get(`${specialIndex}`, {page_size:100,page:0}).then(r => {
					console.log(r)
					this.shopData = r.data;
					
				}).catch((err) => {
					console.log(err)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		width: 100%;
		text-align: center;
		position: relative;
		height: 64upx;
		margin-bottom: 40upx;
		image{
			width: 61.6%;
		}
		view{
			position: absolute;
			top: 50%;
			left: 50%;
			color: #FFFFFF;
			font-size: 32upx;
			transform: translate(-50%, -50%);
		}
		
	}
	.bg-color{
		background:linear-gradient(90deg,rgba(255,0,0,1) 0%,rgba(231,0,1,1) 100%);

	}
	.top {
		width: 100%;
		margin-bottom: 20upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.foot {
		    width: 30%;
		    margin-bottom: 10px;
		    margin: 0% 1% 2%;
		    background-color: #fff;
		    border-radius: 5px;
		    display: inline-block;
		    vertical-align: top;
		image{
			border-radius: 5px 5px;
		}
		.left {
			width: 100%;
			display: inline-block;
			
			image {
				width: 80%;
				margin: 0 10%;
				height: 100%;
			}
		}
		.right {
			position: relative;
			float: left;
			width: 100%;
			height: 180upx;
			.cont {
				font-size: 14px;
				font-family: PingFangSC-Regular,PingFang SC;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #1F1F1F;
				font-weight: 700;
				margin-left: 16upx;
			}
			.grab {
				display: inline-block;
				color: #ffffff;
				font-size: 12px;
				margin-left: 16upx;
				margin-top: 14upx;
				height: 36upx;
				line-height: 36upx;
				border-radius: 8upx;
				background: rgba(255,39,0,1);
				padding: 0 4px;
				
				
			}
			.price {
				color: #ff2700;
				font-size: 28upx;
				display: inline-block;
				font-family: PingFangSC-Medium,PingFang SC;
				position: absolute;
				bottom: 16upx;
				left: 12upx;
				font-weight: 700;
			}
			.tu1 {
				width: 44upx;
				height: 48upx;
				right: 14upx;
				position: absolute;
				bottom: 20upx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			
		}
	
	}
</style>
